import React, { Component } from 'react'
import echarts from '@/lib/echarts'
import { connect } from 'react-redux'
import { debounce } from '@/utils'
class RadarChart extends Component {
    static defaultProps = {
        width: '100%',
        height: '350px',
        styles: {},
        className: ''
    }

    state = {
        chart: null
    }
    // dom挂载完就渲染echart 
    componentDidMount() {
        window.addEventListener('resize', () => {
            this.resize()
        })
        this.initChart()
    }
    componentWillReceiveProps(nextProps) {
        // 监听菜单变化
        if (nextProps.sidebarCollapsed !== this.props.sidebarCollapsed) {
            setTimeout(() => {
                this.resize()
            }, 300)
        }
        if (nextProps.chartData !== this.props.chartData) {
            debounce(this.initChart().bind(this), 300)()
        }
    }
    // 组件销毁
    componentWillUnmount() {
        if (!this.state.chart) {
            return
        }
        this.setState({ chart: null })
    }
    // 重置chart
    resize() {
        if (this.state.chart) {
            debounce(this.state.chart.resize.bind(this), 300)()
        }
    }
    // 初始化chart
    initChart() {
        this.setState({ chart: echarts.init(this.el, "macarons") }, () => {
            // 需要对chart进行图表配置
            this.setOptions(this.props.chartData);
        });
    }
    setOptions(data) {
        const { clean, guolv, fresh } = data;
        this.state.chart.setOption({
            radar: {
                radius: '66%',
                center: ['50%', '42%'],
                splitNumber: 8,
                splitArea: {
                    areaStyle: {
                        color: 'rgba(127,95,132,.3)',
                        shadowBlur: 45,
                        shadowColor: 'rgba(0,0,0,.5)',
                        shadowOffsetX: 0,
                        shadowOffsetY: 15,
                    }
                },
                // 雷达图指标设定
                indicator: [
                    { name: '销售量', max: 20000 },
                    { name: '访问量', max: 20000 },
                    { name: '信息量', max: 20000 },
                    { name: '开发量', max: 20000 },
                    { name: '标记量', max: 20000 },
                ],
            },
            legend: {
                left: 'center',
                bottom: 10,
                data: ['过滤器', '净化器', '空气清新机']
            },
            // tooltip
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow' // line | shadow
                }
            },
            series: [
                {
                    type: 'radar',
                    symbolSize: 0,
                    areaStyle: {
                        normal: {
                            shadowBlur: 13,
                            shadowColor: 'rgba(0,0,0,.2)',
                            shadowOffsetX: 0,
                            shadowOffsetY: 10,
                        }
                    },
                    data: [
                        {
                            value: clean,
                            name: '过滤器'
                        },
                        {
                            value: guolv,
                            name: '净化器'
                        },
                        {
                            value: fresh,
                            name: '空气清新机'
                        },
                    ]
                }
            ]
        })
    }
    render() {
        const { width, height, styles, className } = this.props
        return (
            <div className={className}
                ref={el => (this.el = el)}
                style={{
                    ...styles,
                    width,
                    height
                }}
            ></div>
        )
    }
}
export default connect(state => state.app)(RadarChart) 